<template>
    <div class="home-page">
        <div class="header row">
            <div class="btn-menu" @click="switchMenu">
                <img
                    src="https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-09/nisgujy4bxsnzpdhpd32v2bimi3ov72m_.png"
                    alt
                />
            </div>
            <div
                v-if="keyword.length === 0"
                class="title row"
                @click="switchMenu"
            >
                <div class="gan">{{ titleInfo.ganName }}</div>
                <span class="arrow">></span>
                <div class="mu">{{ titleInfo.muName }}</div>
                <span class="arrow">></span>
                <div class="ke">{{ titleInfo.keName }}</div>
            </div>

            <div v-else class="title">搜索：{{ keyword }}</div>

            <div class="btn-search icon" @click="toSearchPage">
                <img :src="require(`@/assets/icon/search_dark.png`)" />
            </div>
        </div>
        <ShellMenu v-model="showMenu" @choose="onChangeShells" />

        <div class="body">
            <div class="shells">
                <div
                    v-for="(shell, index) in shells"
                    :key="index"
                    class="item"
                    @click="toDetailPage(shell)"
                >
                    <ShellView :item="shell" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ShellView from "./components/shellView/index";
import ShellMenu from "./components/shellMenu/index";

export default {
    name: "Home",
    components: {
        ShellView,
        ShellMenu
    },
    data() {
        return {
            shells: [],
            showMenu: false,
            titleInfo: {
                ganName: "纲",
                muName: "目",
                keName: "科"
            },
            keyword: ""
        };
    },
    watch: {
        $route() {
            const keyword = this.$route.query.keyword;
            this.getInitShells(keyword);
        }
    },
    created() {
        console.log("getDeviceId", this.$reporter.getDeviceId());
        this.getInitShells(this.$route.query.keyword);
    },
    mounted() {
        console.log("home-mounted");
    },

    methods: {
        toDetailPage(item) {
            console.log("查看详情", item);
            this.$router.push({
                path: `/article/detail`,
                query: {
                    docId: "28ee4e3e608b76d413b3f2d7015621da",
                    shuId: item.shuId,
                    ganId: item.ganId
                }
            });
        },
        toSearchPage() {
            this.$router.push({
                path: "/search/index"
            });
        },
        getInitShells(keyword) {
            const jsonList = this.$store.state.shellList;

            this.$store.state.shellList = jsonList;

            if (keyword && keyword.length > 0) {
                this.keyword = keyword || "";
                const result = jsonList.filter(shell => {
                    let isFind = false;
                    Object.keys(shell).forEach(k => {
                        if (shell[k] === keyword) {
                            isFind = true;
                        }
                    });
                    return isFind;
                });
                this.shells = result;
                console.log("keyword", this.$route.query, result, jsonList);
            } else {
                this.shells = jsonList.slice(0, 20);
            }
        },

        onChangeShells({ ke, curGanName, curMuName, curKeName }) {
            // const { ganId, muId, keId, shuId } = ke.shells[0];
            this.shells = ke.shells;
            console.log(
                "更新当前数据",
                curGanName,
                curMuName,
                curKeName,
                ke.shells[0]
            );
            this.titleInfo = {
                ganName: curGanName,
                muName: curMuName,
                keName: curKeName
            };
            this.keyword = "";
        },
        switchMenu() {
            this.showMenu = true;
        }
    }
};
</script>


<style lang="less" scoped>
.home-page {
    font-size: 30px;
    width: 100vw;
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: 100px;
    background: #f5f5f5;

    .header {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        padding: 0 30px;
        height: 100px;
        align-items: center;
        border-bottom: 1px solid #eee;
        background: #fff;
        .btn-menu {
            width: 60px;
            height: 60px;
            margin-right: 30px;
            img {
                width: 100%;
            }
        }

        .btn-search {
            width: 50px;
            height: 50px;
        }

        .title {
            flex: 1 1 auto;
            align-items: center;
            font-weight: 600;

            .mu {
                color: #ff5c38;
            }
            .ke {
                font-weight: normal;
            }
            .arrow {
                margin: 0 10px;
                font-size: 24px;
                color: #aaa;
            }
        }
    }

    .body {
        width: 100%;
        box-sizing: border-box;

        .shells {
            padding: 30px 30px;
            .item {
                background: #fff;
                border-radius: 20px;
                overflow: hidden;
                margin-bottom: 30px;
            }
        }
    }
}
</style>